<template>
  <div class="order-data">
    <div class="order-left">
      <!-- 左侧的每一项 每行五个 -->
      <div v-for="item in leftData" :key="item.title" class="order-item">
        <div class="icon">
          <img :src="item.icon" alt="" srcset="" />
        </div>
        <div class="order-item-content">
          <div class="order-item-title">
            {{ item.title }}
            <span class="order-item-title-desc">今日</span>
          </div>
          <div class="order-item-number">{{ item.number }}</div>
          <!-- 较昨日 -->
          <div class="order-item-diff">
            <img
              class="order-item-diff-icon"
              :src="item.diff.type === 'up' ? upSvg : downSvg"
              alt=""
              srcset=""
            />
            <div class="order-item-diff-number">{{ item.diff.number }}</div>
            <div class="order-item-diff-percent">{{ item.diff.percent }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-right">
      <div class="order-right-item">
        <div class="icon">
          <img :src="yjtzImg" alt="" srcset="" />
        </div>
        <div class="order-right-body">
          <span class="title">预警通知</span>
          <span class="nums">23</span>
        </div>
        <div>
          <el-button class="danger-btn" type="danger">立即处理</el-button>
        </div>
      </div>
      <div class="order-right-item">
        <div class="icon">
          <img :src="dgjImg" alt="" srcset="" />
        </div>
        <div class="order-right-body genjin">
          <span class="title">待处理订单</span>
          <span class="nums">23</span>
        </div>
        <div>
          <el-button class="warning-btn" type="warning">立即处理</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ptzddsImg from "@/assets/images/dashboard/admin/ptzdds.png";
import ptthlImg from "@/assets/images/dashboard/admin/ptthl.png";
import fgzddsImg from "@/assets/images/dashboard/admin/fgzdds.png";
import byfgzddsImg from "@/assets/images/dashboard/admin/byfgzdds.png";
import ptzjeImg from "@/assets/images/dashboard/admin/ptzje.png";
import ptthjeImg from "@/assets/images/dashboard/admin/ptthje.png";
import fgzjeImg from "@/assets/images/dashboard/admin/fgzje.png";
import byfgjeImg from "@/assets/images/dashboard/admin/byfgje.png";
//
import upSvg from "@/assets/images/dashboard/admin/up.svg";
import downSvg from "@/assets/images/dashboard/admin/down.svg";

// 预警通知
import yjtzImg from "@/assets/images/dashboard/admin/yjtz.png";
import dgjImg from "@/assets/images/dashboard/admin/dgj.png";

// 平台总订单数
// 平台退货量
// 复购总订单数
// 本月复购订单数
// 平台总金额
// 平台退货金额
// 复购总金额
// 本月复购金额
const leftData = ref([
  {
    icon: ptzddsImg,
    title: "平台总订单数",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: ptthlImg,
    title: "平台退货量",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: fgzddsImg,
    title: "复购总订单数",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: byfgzddsImg,
    title: "本月复购订单数",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  //  第二排
  {
    icon: ptzjeImg,
    title: "平台总金额",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: ptthjeImg,
    title: "平台退货金额",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: fgzjeImg,
    title: "复购总金额",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
  {
    icon: byfgjeImg,
    title: "本月复购金额",
    number: 1000,
    diff: {
      type: "up",
      number: "较昨日",
      percent: "10%",
    },
  },
]);
</script>

<style lang="scss" scoped>
@import "../../common/orderData.scss";
</style>
